<template>
  <div>
    <el-tabs v-model="activeTab" class="gl_tabs">
      <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
        <component :is="item.component" v-if="activeTab === item.name" ref="tocheck" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { api_GET_ClubBranchClubStatisticsOrgnazitionUnitId } from '@/extend/api/hallswaggerApi/app.js';
import studentlist from './studentlist.vue';
import stafflist from './stafflist.vue';
export default {
  props: {
    branchId: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      id: '', // 分道馆id
      activeTab: this.$route.query.type ? this.$route.query.type : 'stafflist',
      branchid: '',
      tabList: [
        {
          label: '员工',
          name: 'stafflist',
          productStatus: 'stafflist',
          component: stafflist
        },
        {
          label: '学员',
          name: 'studentlist',
          productStatus: 'studentlist',
          component: studentlist
        }
      ]
    };
  },
  watch: {
    branchId: {
      handler(a, b) {
        this.branchid = a;
        console.log(this.branchid);
        this.$refs.tocheck[0].getList();
        this.getcount();
      },
      deep: true
    }
  },
  created() {
    this.branchid = this.branchId;
    this.tabList[0].label = '员工(人数)';
    this.tabList[1].label = '学员(人数)';
    this.getcount();
  },
  methods: {
    tabClick() {},
    getcount() {
      api_GET_ClubBranchClubStatisticsOrgnazitionUnitId(this.branchid).then(res => {
        console.log(res);
        this.tabList[0].label = '员工(' + res.employeeCount + ')';
        this.tabList[1].label = '学员(' + res.studentCount + ')';
      });
    }
  }
};
</script>

<style>

</style>
